<template>
	<view class="order">
		<view class="order_input public_sty"><uni-easyinput v-model="orderValue" placeholder="搜索我的订单" prefixIcon="search" placeholder-style="color:#C0C0C0" /></view>
		<view class="order_tag">
			<view :class="tagCont == index ? 'tag_sty' : 'tag'" v-for="(item, index) in ordertag" :key="index" @click="tagClick(index, item)">
				<text>{{ item.text }}</text>
			</view>
		</view>
		<view :class="item.status == 3 ? 'seize_box' : ''">
			<view class="order_con public_sty" v-for="(item, index) in orderlist" :key="index">
				<view class="order_con_top">
					<view class="order_shop_con">
						<radio-group name="" style="width: 22px; margin-right: 10rpx;" @click="orderadio(index, item)" v-if="item.status == 3">
							<label><radio value="" style="transform:scale(0.7)" :checked="item.payCheck" /></label>
						</radio-group>
						<view class="order_shop_img"><image src="/static/uni.png" mode=""></image></view>
						<view class="">
							<text>{{ item.name }}</text>
							<uni-icons type="arrowright" color="#C0C0C0" size="11"></uni-icons>
						</view>
					</view>
					<view class="order_status">
						<text v-if="item.status == 3">待支付剩余11小时59分</text>
						<text v-else-if="item.status == 12">处方审核中</text>
						<text v-else-if="item.status == 5">您需在X天内到店自提</text>
						<text v-else-if="item.status == 2">待发货</text>
						<text v-else-if="item.status == 4">已发货</text>
					</view>
				</view>
				<view class="order_content" v-for="(item, idx) in item.shoplist" :key="idx">
					<view class="content_img"><image :src="item.icon" mode=""></image></view>
					<view class="content_box">
						<view class="con_box_top">
							<text class="titles_letter" style="font-size: 28rpx; color: #333333;">{{ item.shopname }}</text>
							<view class="">
								<text style="font-size: 26rpx;">￥</text>
								<text>{{ item.pic }}</text>
							</view>
						</view>
						<view class="con_box_bot">
							<text>药品规格</text>
							<text>x{{ item.shopNum }}</text>
						</view>
					</view>
				</view>
				<view class="content_pic">
					<view class=""></view>
					<view class="pic_sty pic_box" v-if="item.status !== 5">
						<text>总价￥</text>
						<text>{{ item.totalpic }}</text>
					</view>
					<view class="pic_sty pic_box" style="text-align: center;" v-if="item.status !== 5">
						<text>优惠￥</text>
						<text>{{ item.discount }}</text>
					</view>
					<view class="pic_box">
						<text>实付款￥</text>
						<text>{{ item.actualpay }}</text>
					</view>
				</view>
				<view class="content_oper" v-if="item.status == 3">
					<view class="oper_til" @click="more"><text>更多</text></view>
					<view class="oper_drop public_sty" v-if="dropSta">
						<ul>
							<li>在线咨询</li>
							<li class="li_sty">修改地址</li>
							<li>取消订单</li>
						</ul>
					</view>
					<view class="oper_box">
						<view class="oper_btn"><text>帮我付</text></view>
						<view class="oper_btn oper_col"><text>去付款</text></view>
					</view>
				</view>
				<view class="content_oper" v-else-if="item.status == 12 || item.status == 5 || item.status == 2">
					<view class=""></view>
					<view class="" style="display: flex;">
						<view class="oper_btn oper_btn_sty" @click="cancelOrder"><text>取消订单</text></view>
						<view class="oper_btn oper_col" v-if="item.status == 5" @click="opendrop"><text>提货码</text></view>
						<view class="oper_col oper_btn_sty" v-if="item.status == 2" @click="remind"><text>提醒发货</text></view>
					</view>
				</view>
				<view class="content_oper" v-else-if="item.status == 4">
					<view class=""></view>
					<view class="" style="display: flex;">
						<view class="oper_btn oper_btn_sty"><text>查看物流</text></view>
						<view class="oper_col oper_btn_sty"><text>确认收货</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class=" public_sty pay_btn" v-if="item.status == 3">
			<view class=""></view>
			<view class="pay oper_col"><text>合并付款</text></view>
		</view>
		<!-- 提货码 -->
		<uni-popup ref="popups" type="center">
			<view class="popups_box">
				<view class="popups_tlite"><text>取货码</text></view>
				<view class="oper_code"><text>8056 4987 874</text></view>
				<view class="">
					<view class="popups_con">
						<view class=""><text>自提药店：</text></view>
						<view class=""><text>华西大药房</text></view>
					</view>
					<view class="popups_con popups_sty">
						<view class=""><text>提货地址：</text></view>
						<view class="popups_icon">
							<view class=""><text>浦东新区陆家嘴金砖大厦17楼</text></view>
							<uni-icons type="chatboxes"></uni-icons>
						</view>
					</view>
					<view class="popups_con">
						<view class=""><text>联系电话：</text></view>
						<view class=""><text>17687854567</text></view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 取消订单 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup_box">
				<view class="pop_til"><text>请选择取消原因（必选）：</text></view>
				<view class="check_sta" v-for="(item, idxs) in checklist" :key="idxs" @click="radioCheck(idxs)">
					<radio-group name="">
						<label>
							<radio value="" style="transform:scale(0.7)" :checked="idxs == checkVal" />
							<text class="text_letter_sty">{{ item.val }}</text>
						</label>
					</radio-group>
					<view class="pop_input" v-if="idxs == 5">
						<view class="pop_input_text"><text>:</text></view>
						<input type="text" value="" v-model="checkOther"/>
					</view>
				</view>
				<view class="">
					<button type="primary" style="border-radius: 20rpx;" @click="recdeter"><text>提交申请</text></button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderValue: '',
			tagCont: 0,
			dropSta: false,
			checkVal: 0,
			checkOther:'',
			ordertag: [
				{
					status: 1,
					text: '全部'
				},
				{
					status: 3,
					text: '待付款'
				},
				{
					status: 5,
					text: '待自提'
				},
				{
					status: 2,
					text: '待发货'
				},
				{
					status: 4,
					text: '待收货'
				}
			],
			orderlist: [
				{
					name: '华氏大药房',
					status: 2,
					payCheck: true,
					shoplist: [
						{
							icon: '/static/uni.png',
							shopname: '健力多氨糖软骨素钙片中间商你好',
							pic: 22.9,
							shopNum: 2
						},
						{
							icon: '/static/uni.png',
							shopname: '健力多氨糖软骨素钙片中间商你好',
							pic: 22.9,
							shopNum: 2
						},
						{
							icon: '/static/uni.png',
							shopname: '健力多氨糖软骨素钙片中间商你好',
							pic: 22.9,
							shopNum: 2
						}
					],
					totalpic: 91.6,
					discount: 10.1,
					actualpay: 81.6
				},
				{
					name: '华氏大药房',
					status: 5,
					payCheck: true,
					shoplist: [
						{
							icon: '/static/uni.png',
							shopname: '健力多氨糖软骨素钙片中间商你好',
							pic: 22.9,
							shopNum: 2
						}
					],
					totalpic: 91.6,
					discount: 10.1,
					actualpay: 81.6
				}
			],
			checklist: [
				{
					val: '药品/数量拍错'
				},
				{
					val: '收货地址填写错误'
				},
				{
					val: '卖家长期不发货'
				},
				{
					val: '暂不方便取货'
				},
				{
					val: '暂时不需要了'
				},
				{
					val: '其他'
				}
			]
		};
	},
	methods: {
		tagClick(idx, item) {
			console.log(idx);
			this.tagCont = idx;
		},
		orderadio(id, itm) {
			this.orderlist[id].payCheck = !this.orderlist[id].payCheck;
		},
		// 取消订单
		cancelOrder() {
			uni.showModal({
				title: '',
				content: '是否取消订单',
				cancelText: '是',
				confirmText: '否',
				confirmColor: '#00B359',
				cancelColor: '#666666',
				success: res => {
					if (res.confirm) {
						console.log('点击了否');
					} else if (res.cancel) {
						console.log('点击了是');
						this.$refs.popup.open();
					}
				}
			});
		},
		radioCheck(id) {
			this.checkVal = id;
		},
		// 更多
		more() {
			this.dropSta = !this.dropSta;
		},
		// 提交神请
		recdeter(){
			this.$refs.popup.close()
		},
		// 提货码
		opendrop() {
			this.$refs.popups.open('center');
		},
		// 提醒发货
		remind() {
			uni.showToast({
				title: '已提醒商家发货，6小时后可再次提醒',
				icon: 'none'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.order {
	padding: 30rpx;
	.order_input {
		border-radius: 18rpx;
		/deep/ .is-input-border {
			border: none;
		}
	}
	.order_tag {
		display: flex;
		justify-content: space-between;
		margin-top: 32rpx;
		padding: 0rpx 30rpx;
		margin-bottom: 10rpx;
		.tag {
			color: #666666;
			font-weight: 400;
			padding-bottom: 15rpx;
		}
		.tag_sty {
			border-bottom: 4rpx solid #00b359;
			color: #00b359;
		}
	}
	.order_con {
		margin-bottom: 24rpx;
		padding: 24rpx;
		.order_con_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			.order_shop_con {
				display: flex;
				// align-items: center;
			}
			.order_shop_img {
				display: flex;
				align-items: center;
				image {
					width: 50rpx;
					height: 44rpx;
				}
			}
			text {
				margin: 0rpx 10rpx;
			}
			.order_status {
				color: #ff5f42;
				font-size: 26rpx;
			}
		}
		.order_content {
			display: flex;
			margin-bottom: 30rpx;
			.content_img {
				margin-right: 20rpx;
				image {
					width: 160rpx;
					height: 160rpx;
				}
			}
			.content_box {
				.con_box_top,
				.con_box_bot {
					display: flex;
					justify-content: space-between;
				}
			}
			.con_box_bot {
				color: #999999;
				font-size: 28rpx;
			}
		}
	}
}
.oper_drop {
	width: 220rpx;
	height: 314rpx;
	position: absolute;
	bottom: 95%;
	left: 0%;
	ul {
		li {
			padding: 36rpx 0rpx;
			font-size: 28rpx;
			margin: 0px 54rpx;
		}
	}
	.li_sty {
		border-top: 1rpx solid #e5e5e5;
		border-bottom: 1rpx solid #e5e5e5;
	}
}
.content_pic {
	font-size: 28rpx;
	display: flex;
	justify-content: space-between;
	text-align: right;
	.pic_box {
		width: 33%;
	}
	.pic_sty {
		color: #999999;
	}
}
.content_oper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24rpx;
	position: relative;
	.oper_box {
		display: flex;
	}
}
.pay_btn {
	display: flex;
	justify-content: space-between;
	position: fixed;
	bottom: 0%;
	left: 0%;
	width: 92%;
	padding: 10rpx 30rpx;
	.pay {
		padding: 18rpx 32rpx;
		border-radius: 20rpx;
	}
}
.seize_box {
	margin-bottom: 100rpx;
}
.popups_box {
	width: 630rpx;
	background-color: #ffffff;
	padding: 56rpx 30rpx 48rpx 30rpx;
	font-size: 14px;
	border-radius: 16rpx;
	margin: 0px 30rpx;
	.popups_tlite {
		text-align: center;
		color: #333333;
		opacity: 0.6;
	}
	.oper_code {
		font-size: 50rpx;
		color: #00b359;
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 48rpx;
	}
	.popups_con {
		display: flex;
		.popups_icon {
			width: 77%;
			display: flex;
			justify-content: space-between;
		}
	}
	.popups_sty {
		margin: 20rpx 0rpx;
	}
}
.popup_box {
	padding: 66rpx 30rpx 30rpx 30rpx;
	.check_sta{
		margin-bottom: 40rpx;
	}
}
.pop_til {
	margin-bottom: 56rpx;
}
.pop_input {
	width: 80%;
	display: flex;
	input{
		border-bottom: 1rpx solid #999999;
		
	}
	.pop_input_text{
		margin-right: 20rpx;
	}
}
</style>
